<template>
    <div class="pagebar">
        <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page.sync="cur"
         :page-sizes="pageSizes"
         :page-size="pageSize"
         :layout="layout"
         :total="total">
            <span>第 {{cur}}/{{getPageSizes}} 页</span>
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'pagebar',
    data() {
        return {
            cur: this.curPage
        }
    },
    props: {
        total: {
            required: true
        },    // 总条数
        pageSizes: {
            type: Array,
            default: function() {
                return [5,10,20]
            }
        },
        pageSize: {
            type: Number,
            default: 10
        },    // 每页显示条数
        curPage: {
            type: Number,
            default: 1
        }, // 当前页数
        layout: String,    // 子组件（'prev, pager, next, jumper, ->, sizes, total, slot'）
        gridRefresh: Boolean,
    },
    watch: {
        gridRefresh() { // 初始化 curPage
            this.cur = this.gridRefresh? 1 : this.curPage;
        }
    },
    computed: {
        getPageSizes() {
            return Math.ceil(Number(this.total) / this.pageSize)>0?Math.ceil(Number(this.total) / this.pageSize): 1
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val;
            this.cur = 1;
            this.$emit('pageChange', this.cur, val)
        },
        handleCurrentChange(val) {
            this.cur = val;
            this.$emit('pageChange', val, this.pageSize)
        }
    },
    mounted(){
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.pagebar {
    text-align: center;
}
</style>